<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
    table{
        width: 700px;
        border-collapse: collapse; /* 合并表格的边框 */
    }
    tr{
        height: 42px;
    }
    table,td,th{
        border: 1px solid black;
    }
    .box{
        background-color: #ddd;
        border-radius: 5px;  /* 边框圆角 */
        padding-top: 15px;
        padding-left: 30px;
        padding-bottom: 15px;
        width: 290px;
        height: 160px;
        position: fixed;
        margin: auto;
        left: 0px;
        right: 0px;
        top:0;
        bottom: 0;
    }
    </style>
</head>
<body>
    <div id="app">
        <button @click="is_show_form=true">添加商品</button>
        <br><br>
        <table>
            <tr>
                <th>商品ID</th>
                <th>商品标题</th>
                <th>商品数量</th>
                <th>商品价格</th>
                <th>操作</th>
            </tr>
            <tr v-for="goods,key in goods_list">
                <td>{{goods.id}}</td>
                <td>{{goods.name}}</td>
                <td>{{goods.number}}</td>
                <td>{{goods.price}}</td>
                <td>
                    <button @click="edit(key)">编辑</button>
                    <button @click="del(key)">删除{{key}}</button>
                </td>
            </tr>
        </table>
        <div class="box" v-show="is_show_form">
            商品标题: <input type="text" v-model="name"><br><br>
            商品数量: <input type="text" v-model="number"><br><br>
            商品价格: <input type="text" v-model="price"><br><br>
            <!-- 添加商品的时候是没有ID的，编辑保存商品的时候才有ID -->
            <button @click="id>0? save():add() ">保存</button>
            <button @click="cancel">取消</button>
        </div>
    </div>
    <script>
        /*
        * 编辑商品的思路：
        * 1. 用户点击"编辑"，显示表单,表单中是当前商品的信息
        * 2. 用户在点击表单的保存按钮以后，把用户填写在表单里面的数据同步到data属性中的goods_list
        * */
        let vm = new Vue({
            el:"#app",
            data:{
                key:"",     // 当前编辑的数组成员索引
                id:"",      // 商品ID
                name: "",   // 保存表单中的商品标题
                number:"",  // 保存表单中的商品数量
                price:"",   // 保存表单中的商品价格
                is_show_form: false, // 控制表单显示隐藏
                goods_list:[
                    {"id":1,"name":"商品1","number":30,"price":30.5},
                    {"id":2,"name":"商品1","number":30,"price":30.5},
                    {"id":3,"name":"商品1","number":30,"price":30.5},
                    {"id":4,"name":"商品1","number":30,"price":30.5},
                    {"id":5,"name":"商品1","number":30,"price":30.5},
                ],
            },
            methods: {
                cancel: function(){
                    // 隐藏表单
                    this.is_show_form=false;
                    // 清空值
                    this.id='';
                    this.key='';
                    this.name='';
                    this.number='';
                    this.price='';
                },
                add: function(){
                    // 如果有空值不添加
                    if (this.name=="" || this.number=="" || this.price==""){
                        return this.cancel()               
                    }
                    this.goods_list.push({
                        "id": this.goods_list.length+1, // 原来的长度基础上+1
                        "name":this.name,
                        "number":this.number,
                        "price":this.price,
                    });
                    // 可以在vue的方法中调用内部定义的方法,直接通过this.方法名()
                    this.cancel();
                },
                del:function(key){
                    this.goods_list.splice(key,1);
                },
                // 显示编辑的表单数据
                edit: function(key){
                    // 根据key获取对应的数组成员,保存到表单中
                    this.id = this.goods_list[key].id
                    this.name = this.goods_list[key].name
                    this.number = this.goods_list[key].number
                    this.price = this.goods_list[key].price
                    this.key = key; // 保存当前要编辑的商品索引下标
                    this.is_show_form = true;
                },
                // 保存更新的数据
                save:function(){
                    let key = this.key;
                    this.goods_list[key].name = this.name
                    this.goods_list[key].number = this.number
                    this.goods_list[key].price = this.price
                    this.cancel();
                }
            }
        })
    </script>
</body>
</html>